<!-- components/MenuItem.vue -->
<template>
  <el-sub-menu 
    v-if="menu.children && menu.children.length > 0" 
    :index="menu.path"
  >
    <template #title>
      <el-icon v-if="menu.icon">
        <component :is="iconMap[menu.icon]" />
      </el-icon>
      <span>{{ menu.name }}</span>
    </template>
    <template v-for="child in menu.children" :key="child.path">
      <menu-item 
        :menu="child"
        :icon-map="iconMap"
      />
    </template>
  </el-sub-menu>
  <el-menu-item 
    v-else 
    :index="menu.path"
  >
    <el-icon v-if="menu.icon">
      <component :is="iconMap[menu.icon]" />
    </el-icon>
    <template #title>
      <span>{{ menu.name }}</span>
    </template>
  </el-menu-item>
</template>

<script setup lang="ts">
// 定义组件属性
const props = defineProps<{
  menu: {
    id: string
    name: string
    icon?: string
    path: string
    children?: any[]
    meta?: {
      requiresAdmin?: boolean
    }
  }
  iconMap: Record<string, any>
}>()
</script>